<template>
	<view class="collectionsEdit">
		<view class="TopNav">
			<view class="back">
				<view style="font-weight: 700;">
					<uni-icons type="closeempty" size="40rpx" color="#111" @click="back()"></uni-icons>
				</view>
			</view>
			<view class="all-check" @click="handleAllSelect">{{ allSelect ? '取消全选' : '全选' }}</view>
		</view>

		<view class="title">{{ count }}</view>
		<view class="waterfallsFlow" v-show="!loading">
			<waterfallsFlow
				ref="waterfallsFlow"
				imageSrcKey="small_url"
				:single="true"
				:list="list"
				:cols="3"
				:showSelect="true"
				:allSelect="allSelect"
				@image-click="handleImg"
			/>
		</view>
		<view class="loading" v-if="loading"><u-loading-icon></u-loading-icon></view>

		<view class="footer">
			<view class="toolbar">
				<view class="toolbar-icon">
					<uni-icons
						type="trash-filled"
						size="60rpx"
						:color="selectCount ? '#000' : '#bfbfbf'"
						@click="openDelDiglog"
					></uni-icons>
				</view>
			</view>
		</view>

		<view><Dialog ref="diglog" type="bottom" title="确定？" :tips="delTips" @confirm="del" /></view>
	</view>
</template>

<script>
import waterfallsFlow from '@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue';
import Dialog from '@/components/Dialog/Dialog.vue';
import api from '@/common/api.js';
export default {
	components: {
		waterfallsFlow,
		Dialog
	},
	data() {
		return {
			list: [],
			allSelect: false,
			selectList: [],
			selectCount: 0,
			folderId: '', // 收藏夹id
			loading: false
		};
	},
	onLoad(option) {
		this.loading = true;
		// setTimeout(() => {
		// 	this.loading = false;
		// }, 500)
		// console.log(option);
		this.folderId = option.folderId;
		uni.$on('getAssets', data => {
			data.forEach(item => {
				item.checked = false;
			});
			setTimeout(() => {
				this.list = data;
				console.log(this.list);
				this.loading = false;
			}, 500);
		});
	},
	onUnload() {
		uni.$off('getAssets');
	},
	// onShow() {
	// 	uni.$on('getAssets', data => {

	// 		data.forEach(item => {
	// 			item.checked = false;
	// 		})
	// 		this.list = data;
	// 		console.log(this.list);
	// 	})
	// },
	computed: {
		count() {
			return this.selectCount ? `已选择 ${this.selectCount} 张` : '选择图片';
		},
		delTips() {
			return `一旦删除, ${this.selectCount} 张图片将永久消失。你将无法还原这些图片。`;
		}
	},
	methods: {
		back() {
			uni.navigateBack({
				delta: 1
			});
		},

		handleImg(option) {
			this.selectList = option.selectList.map(item => {
				return item.id;
			});
			// console.log('this.selectList ==>', this.selectList);
			this.selectCount = option.selectList.length;
		},
		
		handleAllSelect() {
			if (this.list.length) {
				this.allSelect = !this.allSelect;
			}
		},
		
		openDelDiglog() {
			if (this.selectList.length) {
				this.$refs.diglog.open();
			}
		},

		async del() {
			// 判断token字符串是否存在
			let tokenString = uni.getStorageSync('access_token');
			if (!tokenString) {
				console.log('token不存在');
				return uni.showToast({
					title: '请登录',
					duration: 1000,
					icon: 'error',
					complete() {
						setTimeout(() => {
							uni.navigateTo({
								url: '../loginWays/loginWays'
							});
						}, 1000);
					}
				});
			}
			try {
				let res = await this.$ajax.delete({
					url: api.del_assets,
					data: {
						folder_id: this.folderId,
						asset_ids: this.selectList
					},
					header: {
						Authorization: 'Bearer ' + tokenString
					}
				});
				console.log(res);
				if (res.statusCode == 200) {
					uni.navigateBack({
						delta: 1,
						success: (res) => {
							setTimeout(() => {
								uni.$emit('editCollection', {isDel: true});
							}, 500);
							uni.showToast({
								title: '图片已删除',
								icon: 'none'
							});
						}
					});
				}
			} catch (e) {
				console.log(e);
			}
		}
	}
};
</script>

<style lang="scss">
$font-color: #111;
.collectionsEdit {
	.TopNav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		padding: 16rpx 40rpx;
		background-color: #fff;
		.back {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 80rpx;
			height: 80rpx;
		}
		.all-check {
			// width: 100rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background-color: #efefef;
			color: $font-color;
			font-size: 28rpx;
			letter-spacing: 2rpx;
			text-align: center;
			line-height: 80rpx;
			padding: 0 20rpx;
		}
	}
	.title {
		font-size: 44rpx;
		letter-spacing: 4rpx;
		color: $font-color;
		text-align: center;
		margin: 40rpx 0 20rpx;
	}
	.waterfallsFlow {
		min-height: 63vh;
		padding: 20rpx;
	}
	.footer {
		position: fixed;
		bottom: 0;
		z-index: 99;
		width: 100%;
		margin: 40rpx 0 80rpx;
	}
	.toolbar {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.toolbar-icon {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #fff;
		margin: 0 30rpx;
		// font-weight: 700;
	}
}
</style>
